<template>
    <div class="page-container">
        <div class="dashboard-container">
            <a-card>
                <a-card-grid style="minWidth:'80px';width:25%;height:120px;">
                    <a-row  class="cBody">
                        <a-col :span="20">
                            <p class="stat-p">{{totalCount}}</p>
                            <p class="stat-t">用户总数(个)</p>
                        </a-col>
                    </a-row>
                </a-card-grid>
                <a-card-grid style="minWidth:'80px';width:25%;height:120px;">
                    <a-row  class="cBody">
                        <a-col :span="20">
                            <p class="stat-p">{{orders.memberTotalCount}}</p>
                            <p class="stat-t">会员总数(个)</p>
                        </a-col>
                    </a-row>
                </a-card-grid>
                <a-card-grid style="minWidth:'80px';width:25%;height:120px;">
                    <a-row  class="cBody">
                        <a-col :span="20">
                            <p class="stat-p">{{orders.memberAvailableCount}}</p>
                            <p class="stat-t">有效会员总数(个)</p>
                        </a-col>
                    </a-row>
                </a-card-grid>
                <a-card-grid style="minWidth:'80px';width:25%;height:120px;">
                    <a-row  class="cBody">
                        <a-col :span="20">
                            <p class="stat-p">{{orders.memberFreezeCount}}</p>
                            <p class="stat-t">未续费会员总数(个)</p>
                        </a-col>
                    </a-row>
                </a-card-grid>
            </a-card>
            <a-card style="margin-top:20px;">
                <h3 slot="title" class="c-header-title">会员概况<span></span></h3>
                <div slot="extra" class="c-header-extra tabs">
                      <span v-if="params.type !== 'custom'">
                        <span :class="['tab',{'tab-active':params.type==='today'}]" @click="onTabChange('today')">今日</span>
                        <a-divider type="vertical" />
                        <span :class="['tab',{'tab-active':params.type==='yesterday'}]" @click="onTabChange('yesterday')">昨日</span>
                        <a-divider type="vertical" />
                        <span :class="['tab',{'tab-active':params.type==='week'}]" @click="onTabChange('week')">本周</span>
                        <a-divider type="vertical" />
                        <span :class="['tab',{'tab-active':params.type==='month'}]" @click="onTabChange('month')">本月</span>
                      </span>
                      <span v-else>
                           <a-range-picker style="text-align: left;width:310px;margin-right:5px;" v-model="params.dates" :showTime="{ hideDisabledOptions: true,
                             defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"  format="YYYY-MM-DD HH:mm:ss" />
                          <a-button type="primary" @click="onSearch" >确定</a-button>
                      </span>
                      <a-divider type="vertical" />
                      <a-button class="ant-btn-iconText color-green font16" shape="circle" size="small" icon="plus-circle" @click="onTabChange('custom')" v-if="params.type !== 'custom'"></a-button>
                      <a-button class="ant-btn-iconText color-green font16" shape="circle" size="small" icon="close-circle" @click="onTabChange('today')" v-else></a-button>
                </div>
                <a-card-grid style="width:20%;minWidth:'80px';height:130px;padding-top: 30px;">
                    <a-row  class="cBody" >
                        <a-col :span="20">
                            <p class="stat-p">{{fmMoney(orders.totalAmount,2)}}</p>
                            <p class="stat-t">总交易额(元) </p>
                        </a-col>
                    </a-row>
                </a-card-grid>
                <a-card-grid style="width:30%;minWidth:'100px';height:130px;">
                    <a-row>
                        <a-col :span="14">新会员交易额(元)</a-col>
                        <a-col :span="10" class="text-right">{{fmMoney(orders.newTotalAmount,2)}}</a-col>
                    </a-row>
                    <a-row>
                        <a-progress :percent="orders.newAmountPre" status="active"  :strokeWidth="3" :showInfo="false" />
                    </a-row>
                    <a-row>
                        <a-col :span="14">老会员交易额(元)</a-col>
                        <a-col :span="10" class="text-right">{{fmMoney(orders.oldTotalAmount,2)}}</a-col>
                    </a-row>
                    <a-row>
                        <a-progress :percent="orders.oldAmountPre" status="active" :strokeWidth="3"  :showInfo="false" />
                    </a-row>
                </a-card-grid>
                <a-card-grid style="width:20%;minWidth:'80px';height:130px;padding-top: 30px;">
                    <a-row  class="cBody" >
                        <a-col :span="20">
                            <p class="stat-p">{{orders.totalCount}}</p>
                            <p class="stat-t">交易订单(笔)</p>
                        </a-col>
                    </a-row>
                </a-card-grid>
                <a-card-grid style="width:30%;minWidth:'100px';height:130px;">
                    <a-row>
                        <a-col :span="14">新会员订单数(笔)</a-col>
                        <a-col :span="10" class="text-right">{{orders.newTotalCount}}</a-col>
                    </a-row>
                    <a-row>
                        <a-progress :percent="orders.newCountPre" status="active"  :strokeWidth="3" :showInfo="false" />
                    </a-row>
                    <a-row>
                        <a-col :span="14">老会员订单数(笔)</a-col>
                        <a-col :span="10" class="text-right">{{orders.oldTotalCount}}</a-col>
                    </a-row>
                    <a-row>
                        <a-progress :percent="orders.oldCountPre" status="active" :strokeWidth="3"  :showInfo="false" />
                    </a-row>
                </a-card-grid>
                <a-card-grid style="width:20%;minWidth:'80px';height:130px;padding-top:30px;">
                    <a-row  class="cBody" >
                        <a-col :span="20">
                            <p class="stat-p">{{fmMoney(orders.totalPrice,2)}}</p>
                            <p class="stat-t">客单价(元) </p>
                        </a-col>
                    </a-row>
                </a-card-grid>
                <a-card-grid style="width:30%;minWidth:'100px';height:130px;padding-top:30px;">
                    <a-row  class="cBody" >
                        <a-col :span="12">
                            <p class="stat-p"> {{fmMoney(orders.newPrice,2)}}</p>
                            <span class="stat-t">新会员客单价(元)</span>
                        </a-col>
                        <a-col :span="12">
                            <p class="stat-p">  {{fmMoney(orders.oldPrice,2)}}</p>
                            <span class="stat-t">老会员客单价(元) </span>
                        </a-col>
                    </a-row>
                </a-card-grid>
                <a-card-grid style="width:25%;minWidth:'100px';height:130px;padding-top:30px;">
                    <a-row  class="cBody" >
                        <a-col :span="20">
                            <span class="stat-t">新增会员(个)： </span>
                            <span class="stat-p">  {{orders.memberNewCount}}</span>
                        </a-col>
                    </a-row>
                </a-card-grid>
                <a-card-grid style="width:25%;minWidth:'100px';height:130px;padding-top:30px;">
                    <a-col :span="20">
                        <span class="stat-t">活跃率： </span>
                        <span class="stat-p">  {{orders.activePre}}%</span>
                    </a-col>
                </a-card-grid>
                <a-card-grid style="width:100%;minWidth:'450px';">
                    <h3 class="title">会员排名-按消费金额排名</h3>
                    <a-table :columns="consumeColumns":rowKey="record => record.id" :dataSource="consumeData" :pagination="false" bordered>
                        <template slot="index" slot-scope="text,record,index">
                            {{index+1}}
                        </template>
                        <template slot="amount" slot-scope="amount">
                            {{amount=='--'?'--':fmMoney(amount,2)}}
                        </template>
                    </a-table>
                </a-card-grid>

            </a-card>
            <member-date></member-date>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    import {findMemberStat} from "../../api/dashboard";
    import {fmMoney} from "../../utils";
    import MemberDate from "./MemberData"

    const consumeColumns = [{title: '排名', dataIndex: 'index',width: 80,align:'center',scopedSlots:{customRender:'index'}},
        {title: '会员姓名',dataIndex: 'name',width: 200,align:'center'},
        {title: '手机号',dataIndex: 'phone',width: 200,align:'center'},
        {title: '消费金额',dataIndex: 'amount',width: 200,align:'right',scopedSlots:{customRender:'amount'}}];

    export default {
        name: "MemberDashboard",
        components:{MemberDate},
        data(){
            return{
                consumeColumns,
                params:{
                    type:'today',
                    beginDate:moment().format("YYYY-MM-DD 00:00:00"),
                    endDate: moment().format("YYYY-MM-DD 23:59:59"),
                    dates:[],
                },
                consumeData:[],   //按消费金额会员排名
                orders:{},   //订单
                totalCount:0,  //总人数
            }
        },
        methods:{
            moment,
            fmMoney(money,precision,isUnit){
                return fmMoney(money,precision,isUnit);
            },
            onSearch(){
                if (this.params.dates.length == 0) {
                    this.$message.info('请选择查询日期');
                    return;
                }
                this.params.beginDate = this.params.dates[0].format('YYYY-MM-DD HH:mm:ss');
                this.params.endDate = this.params.dates[1].format('YYYY-MM-DD HH:mm:ss');
                this.onLoad();
            },
            onTabChange(tab){
                if(this.params.type == tab) return;
                switch(tab){
                    case "today":
                        this.params.beginDate = moment().format("YYYY-MM-DD 00:00:00");
                        this.params.endDate = moment().format("YYYY-MM-DD 23:59:59");
                        break;
                    case "yesterday":
                        this.params.beginDate = moment().subtract(1, 'days').format("YYYY-MM-DD 00:00:00");
                        this.params.endDate = moment().subtract(1, 'days').format("YYYY-MM-DD 23:59:59");
                        break;
                    case "week":
                        let weekOfDay = moment().format('E');//计算今天是这周第几天
                        this.params.beginDate = moment().subtract(weekOfDay-1, 'days').format('YYYY-MM-DD 00:00:00');//周一日期
                        this.params.endDate = moment().add(7-weekOfDay, 'days').format('YYYY-MM-DD 23:59:59');//周日日期
                        break;
                    case "month":
                        this.params.beginDate = moment().format('YYYY-MM-01 00:00:00');//本月一号日期
                        this.params.endDate = moment(this.params.beginDate).add(1,"months").subtract(1, 'days').format('YYYY-MM-DD 23:59:59');//本月最后一天日期
                        break;
                    case "custom":
                        this.params.beginDate = moment().subtract(14,"days").format('YYYY-MM-DD 00:00:00');//本月一号日期
                        this.params.endDate = moment().format('YYYY-MM-DD 23:59:59');//本月最后一天日期
                        this.params.dates = [moment(this.params.beginDate),moment(this.params.endDate)];
                        break;
                }
                this.params.type = tab;
                this.onLoad();
            },
            async onLoad(){
                let resp = await findMemberStat(this.params);
                if(!this.qUtil.validResp(resp)){
                    this.$error({title:'请求失败!',okText:'确定'});
                    return false;
                }
                console.log('===========resp',resp)
                this.totalCount = resp.data.totalCount;
                this.orders = resp.data.orders;
                this.consumeData = resp.data.consumeList;
            },
        },
        mounted(){
            this.onLoad();
        }
    }
</script>

<style scoped>
    .dashboard-container{
        min-height:100%;
        padding:20px;
        background-color: #ececec;
    }
    .dashboard-container .cBody{
        text-align: left;
    }
    .dashboard-container .stat-t{
        font-size: 14px;
        color:#555;
    }
    .dashboard-container .stat-p{
        font-size: 26px;
        color:#000;
        font-weight: bolder;
    }
    .c-header-title{
        text-align: left;
        font-size:16px;
        color:#555;
    }
    .c-header-extra{
        text-align: right;
        font-size:14px;
        color:#aaa;
    }
    .c-header-extra.tabs .tab{
        cursor: pointer;
    }
    .c-header-extra.tabs .tab-active{
        color:#0099CC;
    }
    .title{
        padding:0 10px;
        margin-bottom: 10px;
        border-left:4px solid #3283FA;
    }
    .text-right{
        text-align: right;
    }

</style>